<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        header div a{
            color: #6c6c6c;
            text-decoration: none;
        }
        header a:hover{
            color: #0aa1ed;
        }
        .el-table .el-table__cell{
            padding: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="padding: 0;height: 140px">
            <div style="width: 1200px;margin: 0 auto">
                <img src="imgs/logo.png" width="200px" alt="" style="vertical-align: middle">
                <span>
                <a href="">首页</a><el-divider direction="vertical"></el-divider>
                <a href="">热点资讯</a><el-divider direction="vertical"></el-divider>
                <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
                <a href="">社会招聘</a><el-divider direction="vertical"></el-divider>
                <a href="">校园招聘</a><el-divider direction="vertical"></el-divider>
                <a href="">帮助中心</a>
                </span>
            </div>
            <div style="background-color: #82c8ec;height: 60px">
                <div style="width: 1200px;margin: 0 auto">
                    <el-menu
                            default-active="1"
                            class="el-menu-demo"
                            mode="horizontal"
                            @select="handleSelect"
                            background-color="#82c8ec"
                            text-color="#fff"
                            active-text-color="#fff">
                        <el-menu-item index="1">精彩活动</el-menu-item>
                        <el-menu-item index="2">当季女装</el-menu-item>
                        <el-menu-item index="3">品牌男装</el-menu-item>
                        <el-menu-item index="4">环球美食</el-menu-item>
                        <el-menu-item index="5">医药健康</el-menu-item>
                        <el-menu-item index="5">美妆彩妆</el-menu-item>
                        <el-menu-item index="5">母婴产品</el-menu-item>
                        <div style="float: right;margin-top: 12px">
                            <el-input
                                    placeholder="请输入关键字搜索"
                                    v-model="input">
                                <i slot="suffix" class="el-input__icon el-icon-search"></i>
                            </el-input>
                        </div>
                    </el-menu>
                </div>
            </div>
        </el-header>
        <el-mian style="width: 1200px;margin:0 auto">
            <el-row gutter="10">
                <el-col span="18">
                    <el-carousel height="300px">
                        <el-carousel-item v-for="item in bannerArr">
                            <img :src="item.url" style="width: 100%;height: 100%" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
                <el-col span="6">
                    <el-card style="height: 300px">
                        <p><i style="font-weight: bold"
                               class="el-icon-trophy"></i> 销量最高</p>
                        <divider></divider>
                        <template>
                            <el-table
                                    :data="topArr"
                                    style="width: 100%">
                                <el-table-column
                                        type="index"
                                        label="排名"
                                        width="50">
                                </el-table-column>
                                <el-table-column>
                                        <template></template>
                                        prop="title"
                                        label="商品名"
                                        width="90">
                                </el-table-column>
                                <el-table-column
                                        prop="saleCount"
                                        label="销量">
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-card>
                </el-col>
            </el-row>
        </el-mian>
        <el-footer></el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                input:'',
                bannerArr:[{url:"imgs/b1.jpg"},{url:"imgs/b2.jpg"},{url:"imgs/b3.jpg"}],
                topArr:[{title:"小米手机",saleCount:5000},
                    {title:"华为手表",saleCount:4000},
                    {title:"毛巾",saleCount:3000},
                    {title:"双飞燕鼠标",saleCount:2000},
                    {title:"耐克篮球",saleCount:1000},
                    {title:"阿迪袜子",saleCount:500},],
            }
        }
    })
</script>
</html>